import React, { useEffect, useState } from 'react'

// setCount((count) => count - 1) 执行
// App 组件渲染
// 每次渲染都会形成一个闭包
// 而 handleClick 每次点击确实是清除的当前闭包形成的 timer
// 但是你别忘了，前面的多次点击也开了好多个定时器
// 解决方法，让 timer 永远是同一个，那这样就能保证清除的永远是同一个

export default function App() {
  const [count, setCount] = useState(10)
  let timer = null

  // debugger
  // 而 handleClick 每次点击都会执行内部的代码，所以每次点击都会形成一个闭包
  const handleClick = () => {
    clearInterval(timer)
    timer = setInterval(() => {
      setCount((count) => count - 1)
    }, 5000)
  }

  // 注意下面写法确实只会形成一个闭包，就是第一次时候的那个闭包，因为 useEffect 只执行了 1 此
  /* useEffect(() => {
    clearInterval(timer)
    timer = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }, []) */

  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>开始倒计时</button>
    </div>
  )
}
